<template>
	<div class='fx' :class='{tagsMul: mul}'>
		<div class='fxw' v-if='!nodata'>
			<Tag
				v-for 		= '(v,i) in data'
				:key 		= 'i'
				:isClose 	= 'true'		
				:label 		= 'v[nameStr]' 
				@close 		= 'onDel(i)'
			/>
		</div>
		<Button @click='onClick' :label='btnText' :mode='mode' />
	</div>
	<Modal
		:title 		= 'title'
		ref 		= 'modalRef'
		width 		= '80%'
		height 		= '80%'
		@ok 		= 'onOk'
		:bodyStyle = '{padding:0}'
	>
		<User v-if="mode === 'user'" ref='componentRef' :select='true' @change='onChange' :mul='mul' />
		<SaleAgree v-else-if="mode === 'agree'" ref='componentRef' :select='true' :mul='mul' @change='onChange' />
		<Project v-else-if="mode === 'project'" ref='componentRef' :select='true' :mul='mul' @change='onChange' />
		<Product v-else-if="mode === 'product'" ref='componentRef' :select='true' :mul='mul' @change='onChange' />
		<Order v-else-if="mode === 'order'" ref='componentRef' :param='param' :api='api' :mul='mul' :paging='paging' :select='true' @change='onChange' />
		<Instruct v-else-if="mode === 'instruct'" ref='componentRef' :select='true' @change='onChange' />
	</Modal>
</template>

<script setup>
	/* --------------------------- Component --------------------------- */
	const Button	= $.lazy(()=>import('@antd/button.vue'))
	const Tag		= $.lazy(()=>import('@antd/tag.vue'))
	const Modal		= $.lazy(()=>import('@antd/modal.vue'))
	const User		= $.lazy(()=>import('@views/system/user/user.vue'))
	const SaleAgree	= $.lazy(()=>import('@views/sale/agree-sale/index.vue'))
	const Project	= $.lazy(()=>import('@views/project/home/index.vue'))
	const Product	= $.lazy(()=>import('@views/product/product/home.vue'))
	const Order		= $.lazy(()=>import('@views/sale/order/index.vue'))
	const Instruct	= $.lazy(()=>import('@views/project/instruct/index.vue'))
	/* --------------------------- props --------------------------- */
	
	const props = defineProps({
		name 		: String,
		label 		: String,
		form 		: Object,
		mode 		: String,
		idStr 		: String,
		nameStr 	: String,
		value 		: null,
		mul			: { type: [Boolean, Number], default: false },
		id 			: String,
		api 		: String,
		paging 		: { type: [Boolean, Number], default: true },
		param 		: Object,
		def 		: { type: [ Boolean, Number ], default: 1 },
		data 		: { type: Array, default: [] },
		r 			: [ Number, Boolean ],
		nodata		: [ Number, Boolean ],
	})
	const { mode, mul, form, name, label, value, def, nodata } = props
	
	let data = $ref(props.data)
	let modalRef = $ref()
	let componentRef = $ref()
	let rows = $ref([])
	let btnText = $ref('点击选择')
	let nameStr = $ref('nickName')
	/* --------------------------- Emit --------------------------- */
	const emit = defineEmits(['update:value','change', 'blur'])
	
	$.watch(()=>props.data, value=> {
		if(!nodata){data = value}
	})
	
	/* ---------------------------  --------------------------- */
	const onUpdate = () => {
		let val
		let row
		if(mul){
			val =  data.map(v => (v[idStr]))
			row = data
		}else{
			row = data[0]
			val = row?.[idStr] ?? ''
		}
		emit('update:value', val)
		emit('change', $fn.getFormFormat({ label, form, row, name, value:val, idStr, nameStr, formType:'tags', data }) )
	}
	
	let idStr = 'user_code'
	if( mode === 'agree'){
		btnText = '选择合同'
		idStr = 'contractId'
		nameStr = 'contractName'
	}else if( mode === 'project'){
		btnText = '选择项目'
		idStr = 'proId'
		nameStr = 'proName'
	}else if( mode === 'product'){
		btnText = '选择产品'
		idStr = 'productId'
		nameStr = 'productName'
	}else if( mode === 'order'){
		btnText = '选择订单'
		idStr = 'orderId'
		nameStr = 'orderName'
	}else if( mode === 'instruct'){
		btnText = '选择工作令'
		idStr = 'workTokenId'
		nameStr = 'workContent'
	}else{
		const user = $fn.getUser()
		const defaultUser = { nickName: user.nickName, user_code: user.user_code }
		data = $fn.hasArray(props.data) ? props.data : (def ? [defaultUser] : [])
		if( def ){ onUpdate() }
	}
	let title = $ref(label ? label : btnText)
	// 改变时
	const onChange = value => rows = value
	// 选择
	const onOk = ()=>{
		data = rows
		modalRef.close()
		onUpdate()
	}
	// 删除
	const onDel = i => {
		data.splice(i, 1)
		onUpdate()
	}
	// 打开弹窗
	const onClick = () => {
		modalRef.open()
		const keys = data.map(v => v[idStr] )
		setTimeout(()=> componentRef?.setKeys?.(keys) ,100)
	}
</script>